/**
 * @description 踩赞组件（点赞
 */
import React, { useState } from "react"

import AbIcon from "@/components/DecorateIcons/Ab_Icon"

function ThumbsUp({ base }) {

  // 已点赞的id，
  const [thumbsUpId, setThumbsUpId] = useState('')
  // 已踩的id
  const [crazilyId, setCrazilyId] = useState('')


  return (
    <div className="thumbsup">

      {
        (!thumbsUpId && !crazilyId) &&
        <div className="like" onClick={() => setThumbsUpId('1')}>
          <AbIcon className='icon' iconName={base.like_icon} />
          <span className='text' > 赞一下(0)</span >
        </div>
      }

      {
        (!thumbsUpId && !crazilyId) &&
        <div className="unlike" onClick={() => setCrazilyId('1')}>
          <AbIcon className='icon' iconName={base.unlike_icon} />
          <span className='text' > 踩一下(0)</span >
        </div>
      }
      {
        thumbsUpId &&
        <div className="like active" onClick={() => setThumbsUpId('')}>
          <AbIcon className='icon' iconName={base.like_active_icon} />
          <span className='text' > 已赞(1)</span >
        </div>
      }
      {
        crazilyId &&
        <div className="unlike active" onClick={() => setCrazilyId('')}>
          <AbIcon className='icon' iconName={base.unlike_active_icon} />
          <span className='text' > 已踩(1)</span >
        </div>
      }

    </div >
  )
}

export default React.memo(ThumbsUp) 